<template>
  <uni-nav-bar title="车辆" left-icon="left" color="#333" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view
    class="filler"
    v-for="(item, index) in carAll"
    :key="index"
    @click="navTo('customers/DetailCar?id=' + item.id + '&car=' + item.cart_code)"
  >
    <view class="item_filler">
      <image :src="item.image"></image>
      <view>
        <text>{{ item.model }}</text>
        <text>{{ item.cart_code }}</text>
      </view>
    </view>
    <uni-icons type="forward" size="20" color="#666666"></uni-icons>
  </view>
</template>

<script setup lang="ts">
import { carList } from '@/gql/customer';
import { getDriverID } from '@/stores/driverID';
import { useUserStore } from '@/stores/user';
import { navBack, navTo } from '@/utils/navigator';
import { toPublish } from '@mqtt';
import { computed, ref } from 'vue';

// static
const userInfo = useUserStore();
const driver_id = getDriverID();
const customers_id = computed(() => userInfo.customers_id);
const carAll = ref([]);
const repeat = ref(true)//放重复点击

driverCar();

/**
 * 获取车辆列表
 */
function driverCar() {
  if(!repeat.value){
    return
  }
  repeat.value=false
  const payload = {
    query: carList,
    variables: {
      customers_id,
      driver_id,
    },
  };
  toPublish('customers/cartList', payload, (obj: any) => {
    const { cart_list } = obj.data;
    repeat.value=true
    carAll.value = cart_list;
  });
}
</script>

<style scoped lang="less">
.filler {
  width: 95%;
  margin: 2.5%;
  background-color: white;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
  .item_filler {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    image {
      width: 124rpx;
      height: 124rpx;
      border-radius: 5px;
    }
    view {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 15rpx;
      height: 124rpx;
      justify-content: space-around;
      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}
</style>
